<script>
  import Vue from 'vue';
  import Component from 'vue-class-component';

  import personal from "../components/personal.vue";
  import topNav from "../components/topNav.vue"
  import RandomBlogComponent from "../components/RandomBlogComponent.vue"
  import bottomInfo from "../components/bottomInfo.vue"
  import axios from "axios";

  export default {
    data() {
      return {
        changeLink: '### 欢迎交换友链~😊\n' +
          '- 昵称：RoChes\n' +
          '\n' +
          '- 一句话： 扯一下灰色的帘\n' +
          '\n' +
          '- 个人网站：<http://www.rocblog.cn>\n' +
          '\n' +
          '- 头像url：<https://img1.imgtp.com/2023/06/04/UxihXpEC.jpg>\n'+
          '- 背景图url：<https://img1.imgtp.com/2023/06/04/roRlMRkk.jpg>',
        friendList: [],
        commentList: [],
        commentListLength: '',
        replyCommentId: '',
        replyFlag: false,
        replyNickname: '',
        commentInput: {
          content: '',
          qq: '',
          email: ''
        },
        pickerShow: false,
      }
    },
    components: {
      personal,
      topNav,
      RandomBlogComponent,
      bottomInfo
    },
    methods: {
      getFriends() {
        axios.get('/getfriends').then(res => {
          this.friendList = res.data.data
          console.log(this.friendList)
        })
      },
      showEmojiPicker() {
        if (this.pickerShow == false) {
          this.pickerShow = true;
        } else {
          this.pickerShow = false;
        }
      },
      selectEmoji(emoji) {// 选择emoji后调用的函数
        let input = document.getElementById("comment-input")
        let startPos = input.selectionStart
        let endPos = input.selectionEnd
        let resultText = input.value.substring(0, startPos) + emoji.data + input.value.substring(endPos)
        input.value = resultText
        input.focus()
        input.selectionStart = startPos + emoji.data.length
        input.selectionEnd = startPos + emoji.data.length
        this.text = resultText
      },
      uploadComment() {
        //检查QQ号是否为空
        if (this.commentInput.qq.length == 0) {
          this.$message('QQ号不能为空')
          return
        }
        //检查邮箱是否为空
        if (this.commentInput.email.length == 0) {
          this.$message('邮箱不能为空')
          return
        }
        //检查评论是否为空
        if (this.commentInput.content.length == 0) {
          this.$message('评论不能为空')
          return
        }
        //发送请求
        var formData = new FormData()
        formData.append('qq', this.commentInput.qq);
        formData.append('email', this.commentInput.email);
        formData.append('content', this.commentInput.content);
        //检查是回复评论还是评论文章
        //blog_id为12560的是友链的评论
        if (this.replyFlag === false) {
          formData.append('blogId', 12560);
          axios.put('/upload/comment', formData).then(res => {
            if (res.data.code) {
              if (res.data.code == 200) {
                this.$message('评论成功')
                this.$router.go(0)
              } else if (res.data.code == 501) {
                this.$message('QQ号码错误，请检查后重试')
              }
            }
          })
        } else {
          console.log(this.replyCommentId)
          formData.append('commentId', this.replyCommentId);
          axios.put('upload/reply', formData).then(res => {
            if (res.data.code) {
              if (res.data.code == 200) {
                this.$message('回复成功')
                this.$router.go(0)
              }
            }
          })
        }
      },
      toFriends(url) {
        window.location = url;
      },
      getComment() {
        axios.post("/getcomment", this.$qs.stringify({blogId: 12560})).then(res => {
          this.commentList = res.data.data
          this.commentListLength = res.data.data.length
        })
      },
      replyThis(event) {
        this.$refs.app.scrollTo({
          behavior: "smooth",
          top: 1600,
          left: 0
        });
        this.replyFlag = true;
        this.replyCommentId = event.currentTarget.id
        var nickname = event.currentTarget.getAttribute("nickname")
        this.replyNickname = nickname;
      },
      noReply() {
        this.replyFlag = false;
      },
    },
    mounted() {
      this.getComment()
      this.getFriends()
    }
  }
</script>

<template>
  <div ref="app" class="app" style="background-color: white;overflow-x: hidden">

    <topNav></topNav>
    <div class="as">
      <div class="abq">Friends</div>
      <div
        style="position: absolute;bottom: 0;width: 100%;height:100px;background: white;padding: 0;border-top-right-radius: 100%;border-top-left-radius: 100%">
      </div>
    </div>
    <el-container class="middle" style="min-height: 100vh;">
      <el-main style="margin-top: 40px;width: 55vw;overflow: hidden;margin-top: 0;padding: 0">
        <div class="friendContainer">
          <div style="display: flex">
            <div style="  animation: bounceInLeft;
  animation-duration: 2s;;width: 6px;height: 30px;background-color: #008B8B;margin-top: 5px;margin-right: 10px;user-select: none;border: solid white;box-shadow: 0 0 5px goldenrod"></div>
            <div class="altitle" style="animation: bounceInLeft;animation-duration: 2s;">Friend's Link</div>
          </div>
          <div class="fr" >
            <div @click="toFriends(item.url)" class="one-friend" :style="{background:item.background}"
                 v-for="item in friendList">
              <el-image class="f-headshot" :src="item.headshot"></el-image>
              <div class="f-name">{{ item.nickname }}</div>
              <div class="f-desc">{{ item.sign }}</div>
            </div>
          </div>
          <div style="width: 100%;border-top: solid 1px gainsboro">
            <v-md-preview :text="changeLink"></v-md-preview>
          </div>
        </div>
        <div class="comment">
          <div style="font-size: 20px;font-weight: 550;margin-bottom: 20px;display: flex">评论
            <div style="margin-left: 10px;font-size: 13px;margin-top: 6px;color: grey;font-weight: normal">
              {{ commentListLength }}
            </div>
          </div>
          <div class="post-comment">
            <div v-show="replyFlag"
                 style="margin-left: 50px;height: 20px;text-align: start;border-radius: 10px;font-size: smaller;display: flex;color: grey">
              回复
              <div style="margin-left:10px;color: #409eff">@{{ replyNickname }}</div>
              <i @click="noReply" class="el-icon-close" style="margin-top: 2.5px;margin-left: 5px;cursor: pointer"></i>
            </div>
            <el-image @click="showEmojiPicker" class="comment-headshot"
                      :src="require('../assets/images/emoji.png')"></el-image>
            <el-input v-model="commentInput.content" id="comment-input" type="textarea" rows="2" resize="none"
                      placeholder="留下你的友链，链起来！"
                      style="font-size: 13px;margin-left: 10px;user-select: none;width: 80%;border-radius: 20px"></el-input>
            <el-button @click="uploadComment">发表</el-button>
            <i class="el-icon-my-friend nav-icon" style="margin-left: 25px;position: relative;top: 8px"></i>
            <input class="qq" v-model="commentInput.qq" placeholder="输入QQ号自动获取头像昵称"></input>
            <i class="el-icon-my-email nav-icon" style="margin-left: 20px;position: relative;top: 8px"></i>
            <input class="email" v-model="commentInput.email" placeholder="输入邮箱获取回复通知"></input>
            <VEmojiPicker @select="selectEmoji" v-show="pickerShow"
                          style="position: absolute;left: 5%;z-index: 999;top: 150px;height: 200px;"/>
          </div>
          <div class="one-comment" v-for="item in commentList">
            <div class="info">
              <el-image class="comment-headshot" :src="item.headshot"></el-image>
              <div
                style="margin-top: 10px;font-size: 9px;font-weight: 600;color: #61666d;margin-left: 15px;position: relative;top: 15px">
                {{ item.nickname }}
              </div>
              <div class="one-content">
                {{ item.content }}
              </div>
              <div class="comment-time">
                {{ item.time }}
              </div>
              <div class="comment-reply" @click="replyThis($event)" :id="item.id" :nickname="item.nickname">
                回复
              </div>
              <div class="reply" v-for="rep in item.replyList">
                <el-image class="reply-headshot" :src="rep.headshot"></el-image>
                <div style="font-size: 9px;font-weight: 600;color: #61666d;margin-left: 10px;margin-top: 3px">
                  {{ rep.nickname }}
                </div>
                <div class="reply-content">
                  {{ rep.content }}
                </div>
                <div class="reply-time">
                  {{ rep.time }}
                </div>
              </div>
              <!--              <div class="reply-more">共86条回复，<span class="asd">点击查看</span></div>-->
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <bottomInfo></bottomInfo>
  </div>
</template>

<style>
  @import "../assets/common.css";
  @import "../assets/detail.css";
</style>
<style scope>
  @import "../assets/friends.css";
</style>
